<head>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/survey_magic.js"></script>
<link rel="stylesheet" type="text/css" href="/css/steroid.css" />
</head>

<?php
	$image_tag = "<img src='".$image_file."' id='magicPic' onclick='setRec(event, $item_id);' onmousemove='drawHighlight(event);'/>";
	$form_tag = "<form action='/clients/set_rectangles/".$item_id."' method='post' />";
	$highlight_tag = "<img src='/img/blue.gif' class='highlight' id='highlight' onclick='setRec(event, $item_id);' onmousemove='drawHighlight(event);' style='display: none;'/>";
?>


<table>
	<tr>
		<td valign='top'>
			<?php echo $image_tag; ?>
		</td>
		<td valign='top'>
			Click and drag to define regions:<br />
			<?php echo $form_tag; ?>
				<input type="hidden" id="startx" value='-1' />
				<input type="hidden" id="starty" value='-1' />
				<input type="hidden" id="index" value='0' />
				<div id="recs"></div>
				<input type='hidden' name="done" id="done" value='0' />
				<input type="submit" name="NextButton" id="NextButton" value="Another Item" /><br />
				<input type='submit' name="DoneButton" id="DoneButton" value="Done" onclick="document.getElementById('done').value='1'" /><br />
			</form>
		</td>
	</tr>
</table>

<?php echo $highlight_tag; ?> 
